<template>
  <ThemeConfigProvider :theme="theme">
    <a-tooltip :title="tooltipTitle">
      <a-button
        type="text"
        size="small"
        :icon="isFullscreen ? iconOffFullScreen : iconFullScreen"
        @click="toggleFullscreen" />
    </a-tooltip>
  </ThemeConfigProvider>
</template>

<script setup lang="ts">
import { useFullscreen } from '@vueuse/core';
import { iconifyToAntdvIconVNode } from '@ykst/shared';
import ThemeConfigProvider, { type ThemeProps } from '@/components/AntdVue/ThemeConfigProvider.vue';

defineProps<ThemeProps>();

const { isFullscreen, toggle: toggleFullscreen } = useFullscreen();

const iconFullScreen = iconifyToAntdvIconVNode('i-icon-park-outline:full-screen-one');
const iconOffFullScreen = iconifyToAntdvIconVNode('i-icon-park-outline:off-screen-one');

const tooltipTitle = computed(() => (isFullscreen.value ? '退出全屏(F11)' : '全屏(F11)'));
</script>

<style scoped></style>
